/**
 * Created by Administrator on 2017/7/16.
 */
var React = require('react');
var Header = require('../widget/Header');
var ajax = require('../tools/ajax');
var Icon = require('../components/Icon')

module.exports = React.createClass({
    getInitialState: function (){
        return {
            theme:"Default",//默认
            inputText:null,
            catagory_id:"",
            limit:6,
            items:[],
            oldItems:[],
        }
    },
    componentDidMount: function () {
        localStorage.setItem("back","#fenlei");
        this.getWantData();
        setTimeout(this.iscroll,500);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#searchGoodsWrap",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
    },

    // 猜你想要
    getWantData:function () {
        var p=this;
        var shop_id = localStorage.getItem("shopId");
        ajax("POST","getSearch",{},function(dt){
            if(dt.data.length > 0 && dt.success){
                var objs = dt.data;
                var items = p.state.items;
                var oldItems = p.state.oldItems;
                if(oldItems.length>0){
                    if(objs[0].id !== oldItems[0].id){
                        for(var i=0;i<objs.length;i++){
                            items.push(objs[i]);
                        }
                    }
                }else{
                    items = objs
                }
                p.setState({items:items,oldItems:objs});
            }
        });
    },
    /**搜索*/
    getSearchData:function () {
        var inputText = this.refs.Header.refs.inputText.value;
        var historySearch = localStorage.getItem("historySearch");
        if(historySearch&&inputText!=''){
            historySearch += ","+inputText;
        }else if(inputText!=''){
            historySearch = inputText;
        }
        localStorage.setItem("historySearch",historySearch);
        localStorage.setItem("searchPro",inputText);
        localStorage.back = "#searchGoods";
        location.href ="#fenleiPro";
    },
    /**跳转搜索的商品页面*/
    toSearchPro(e){
        var searchPro = e.currentTarget.getAttribute("data");
        localStorage.setItem("searchPro",searchPro);
        location.href ="#fenleiPro";
    },
    getRandomArrayElements:function(arr, count){
        var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
        var bb=[];
        while (i-- > min) {
            index = Math.floor((i + 1) * Math.random());
            temp = shuffled[index];
            shuffled[index] = shuffled[i];
            shuffled[i] = temp;
        }
        return  bb=shuffled.slice(min);
    },
    action: function (e){
        var action = e.currentTarget.getAttribute("action");
        var id = e.currentTarget.getAttribute("data-id");
        var price = e.currentTarget.getAttribute("data-price");
        localStorage.setItem("back","#searchGoods");
        localStorage.setItem("goods_id",id);
        localStorage.setItem("price",price);
        location.href = action;
    },
    render: function () {
        var p = this;
        var historySearch = localStorage.getItem("historySearch");
        if(historySearch) {
            var searchList = historySearch.split(",").reverse().slice(0,13).map(function (obj, index) {
                return <a key={index} onClick={p.toSearchPro} data={obj}>{obj}</a>
            });
        }
        let objs = p.state.items;
        console.log(objs)
        let ccArr=p.getRandomArrayElements(objs,6);
        let b = [];//去除undefined后的结果
        for(let i=0;i<ccArr.length;i++){
            if(typeof(ccArr[i])!='undefined'){
                b.push(ccArr[i]);
            }
        }
        var odd = [];
        var even = [];
        for(let i = 0;i <b.length;i++){
            if(i%2 == 0){
                odd.push(b[i]);
            }else{
                even.push(b[i]);
            }
        }
        var shoplist_l = odd.map(function(obj,index){
            if(obj.goods_img) {
                var goods_img = obj.goods_img.split(",")[0];
            }
            return(
                <div key={index} className="box" onClick={p.action} action="#goodDetail" data-id={obj.id} data-shop-id={obj.shop_id} data-name={obj.goods_name} data-number={obj.goods_number} data-price={obj.ProPrice}>
                    <div className="pic">
                        <img src={goods_img} />
                    </div>
                    <div className="shop_pro">
                        <p className="pname" ref="goodname">{obj.goods_name}</p>
                        <p className="p_des">{obj.goods_desc}</p>
                        <span className="p_des" ref="goodnumber">{obj.goods_number}</span><span className="p_des">件</span>
                    </div>
                    <div className="spro_con">
                        <div className="pro_country">

                        </div>
                        <div className="pro_price">
                            <span ref="goodprice">{obj.ProPrice}</span><span>元</span>
                        </div>
                        <div className="pro_addcart">
                            <Icon icon="#icon-gouwuche-tianjia"></Icon>
                        </div>
                    </div>
                </div>
            )
        });

        var shoplist_r = even.map(function(obj,index){
            if(obj.goods_img) {
                var goods_img = obj.goods_img.split(",")[0];
            }
            return(
                <div key={index} className="box" onClick={p.action} action="#goodDetail" data-id={obj.id} data-shop-id={obj.shop_id} data-name={obj.goods_name} data-number={obj.goods_number} data-price={obj.ProPrice}>
                    <div className="pic">
                        <img src={goods_img} />
                    </div>
                    <div className="shop_pro">
                        <p className="pname" ref="goodname">{obj.goods_name}</p>
                        <p className="p_des">{obj.goods_desc}</p>
                        <span className="p_des" ref="goodnumber">{obj.goods_number}</span><span className="p_des">件</span>
                    </div>
                    <div className="spro_con">
                        <div className="pro_country">

                        </div>
                        <div className="pro_price">
                            <span ref="goodprice">{obj.ProPrice}</span><span>元</span>
                        </div>
                        <div className="pro_addcart">
                            <Icon icon="#icon-gouwuche-tianjia"></Icon>
                        </div>
                    </div>
                </div>
            )
        });

        return (
            <div className="main" id="main">
                <Header ref="Header" theme={p.state.theme} icon="#icon-fanhui" actLink="#fenlei" searchFlag={true} header="搜索"></Header>
                <button className="search-btn" onClick={p.getSearchData}>搜索</button>
                <div id="searchGoodsWrap" className="container-t noFooter">
                    <div style={{minHeight:"31.16rem"}}>
                        <div id="search-resultOne">
                            <div className="search-result-all">
                                <h2>最近搜索</h2>
                                <div className="search-result">
                                    {searchList}
                                </div>
                            </div>
                        </div>
                        <div className="search-want-all">
                            <h2>猜你想要</h2>
                            <div className="search-want shopProWrap">
                                <div className="pro">
                                    <div className="pro-left">
                                        {shoplist_l}
                                    </div>
                                    <div className="pro-right">
                                        {shoplist_r}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});